/*
* @Author: zhangqiaojuan
* @Date: 2023-06-10 10:31:21
* @LastEditors: Yejing
* @LastEditTime: 2023-07-04 14:30:58
* @Description: 店铺商品
*/
<template>
    <view class="shops-homepage">
        <c-layout @getNewsData="getNewsData">
            <c-navigation-bar slot="head" navbar-bg-color="#1B1D29"
                              left-icon-color="#fff" :is-search="true" searchBgcolor=""
                              search-border="#E1E8E8" @searchEvent="searchEvent">
                <!--                <template slot="rightIcon">-->
                <!--                    <bubble ref="bubble" :data='bubble.data' @bubbleLineClick='bubbleLineClick'></bubble>-->
                <!--                </template>-->
            </c-navigation-bar>
            <view class="container-box">
                <shopMessage :shopId="followUrlData.shopId"></shopMessage>
                <view class="tabs-group">
                    <view :class="['tab',current == 'all' ? 'active-tab' : '']" @click="currentEvent('all')">
                        {{$t('classifySeckill.all')}}
                    </view>
                    <view :class="['tab',current == 'new' ? 'active-tab' : '']" @click="currentEvent('new')">
                        {{$t('classifySeckill.newest')}}
                    </view>
                </view>
                <view class="type-time" v-if="current == 'all'">
                    <u-tabs class="tabs-type-blue" :bg-color="tabsType.bgColor" :list="tabsType.list"
                            :active-item-style='tabsType.activeItem' :show-bar='false' :is-scroll="true"
                            :current="tabsType.current"
                            @change="changeTab($event,tabsType.list[$event])">
                    </u-tabs>
                </view>
                <view class="product-list">
                    <view class="product-item" @click="$u.route('/pages/productDetails/productDetails',{
                        productId:item.id
                    })" v-for="(item,index) in productList" :key="item.id"
                          :style="(index+1)%2 == 0 ? 'margin-right:0;' : ''">
                        <view class="product-img">
                            <u-image width="100%" height="350rpx" border-radius="30rpx"
                                     :src="$u.file.getMedieUrl(item.image)"></u-image>
                        </view>
                        <view class="product-msg">
                            <view class="product-name spill">
                                {{ item.goodsName }}
                            </view>
                            <view class="product-class spill">
                                {{ item.goodsDesc }}
                            </view>
                            <view class="product-price">
                                {{ item.price }}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <shopTabbar :shopId="followUrlData.shopId" :current="1" slot="footer"></shopTabbar>
        </c-layout>

    </view>
</template>

<script>
import bubble from "@/pages/searchInfo/components/bubble.vue"
import lineProductCard from "@/pages/searchInfo/components/productCard.vue"
import shopMessage from "@/pages/shop/components/shopMessage.vue"
import shopTabbar from "@/pages/shop/components/tabBar.vue"


export default {
    components: {
        bubble,
        shopMessage,
        lineProductCard,
        shopTabbar
    },
    data() {
        return {
            //搜索
            search: {
                navType: 'backSearch',
                navPlaceholder: 'Search...',
            },
            //更多
            bubble: {
                data: [{
                    text: '分享',
                    icon: 'edit-pen',
                    url: '/pages/searchInfo/components/anchorCard/anchorHomepage/bubble/edit'
                }, {
                    text: '服务',
                    icon: 'grid',
                    url: '/pages/searchInfo/components/anchorCard/anchorHomepage/bubble/qrCode'
                }, {
                    text: '细节',
                    icon: 'account',
                    url: '/pages/searchInfo/components/anchorCard/anchorHomepage/bubble/visitor'
                }]
            },
            //商铺信息
            message: {
                name: 'Meizu',
                image: require("static/images/product.png"),
                isBrand: true,
                brand: "品牌",
                followers: '332.2k'
            },
            productList: [],
            current: 'all',
            tabsType: {
                list: [{
                    name: 'Jackets'
                }, {
                    name: 'Start'
                }, {
                    name: 'Dresses'
                }, {
                    name: 'Jeans'
                }],
                bgColor: 'none',
                current: undefined,
                activeItem: {
                    'background': '#2934D0',
                    'color': '#fff !important'
                },
            },
            followUrlData: {},
            paging: {
                size: 6,
                current: 1
            },
            total: 0,
            cateId: undefined
        }
    },
    onLoad(val) {
        this.followUrlData = val
        this.paging.shopId = this.followUrlData.shopId
        this.getAllTypes()
    },
    methods: {
        //点击更右上角更多图标
        bubbleLineClick(url, index) {
            if (url) {
                uni.navigateTo({
                    url: url
                })
            }
            if (index == 3) {
                this.sharePopShow = true
            }
        },
        tabsChange(index) {
            this.type.current = index
        },
        //切换
        changeTab(index, e) {
            this.paging.current = 1
            this.productList = []
            this.tabsType.current = index;
            this.paging.cateId = e.id
            this.cateId = e.id
            this.getProductList(this.paging)
        },
        //获取全部分类
        getAllTypes() {
            this.$u.get('/app/shopGoodsInfo/cate/' + this.followUrlData.shopId).then(res => {
                this.tabsType.list = res.data
                if (this.tabsType.list.length > 0) {
                    this.paging.cateId = this.tabsType.list[0].id
                    this.cateId = this.tabsType.list[0].id
                    this.getProductList(this.paging)
                }
            })
        },
        //获取产品
        getProductList(paging) {
            this.$u.post('/app/shopGoodsInfo/useraLLpage', paging).then(res => {
                if (res.data.records.length > 0) {
                    this.productList = [...this.productList, ...res.data.records].filter(function (element, index, self) {
                        return self.findIndex(el => el.id == element.id) === index
                    })
                    this.total = res.data.total
                } else {
                    this.productList = []
                }

            })
        },
        //分页
        getNewsData() {
            if (this.productList.length == this.total) {
                return
            }
            this.paging.current += 1
            this.getProductList(this.paging)
        },
        //搜索
        searchEvent(val) {
            this.productList = []
            this.paging.current = 1
            this.paging.name = val
            this.getProductList(this.paging)
        },
        //切换tab
        currentEvent(type) {
            this.productList = []
            this.paging.current = 1
            this.current = type
            if (this.current == 'new') {
                this.paging.new = true
                delete this.paging.cateId
            } else {
                this.paging.cateId = this.cateId
                delete this.paging.new
            }
            this.getProductList(this.paging)
        }
    },
    //离开页面关闭气泡
    onHide() {
        // this.$refs.bubble.moreClick()
    },

}
</script>

<style lang="scss" scoped>
.container-box {
  background-image: linear-gradient(#1B1D29 180px, #1B1D29 50px, #fff, #fff, #fff);

}

.tabs-group {
  display: flex;
  position: relative;
  margin-bottom: 36rpx;

  .tab {
    color: #999CAD;
    font-size: 32rpx;
    padding-right: 16rpx;
    height: 60rpx;
  }

  .active-tab {
    color: #FFFFFF;
    font-size: 36rpx;
  }

  .tab-active-line {
    position: absolute;
    bottom: 0;
    width: 16rpx;
    height: 6rpx;
    background: #FFFFFF;
    border-radius: 3rpx;
    opacity: 1;
    transform: translate(20rpx, -100%);
    transition-duration: 0.5s;
  }

  .tab-active-new {
    transform: translate(50px, -100%);
  }
}

.product-list {
  padding-top: 42rpx;

  .product-item {
    width: 320rpx;
    margin-right: 44rpx;
    display: inline-block;

    .product-img {
      width: 100%;
      border-radius: 30rpx;
      overflow: hidden;
    }

    .product-msg {
      font-size: 22rpx;
      text-align: center;
      color: #000000;
      padding-top: 16rpx;
    }

    .product-name {
      font-size: 28rpx;
      padding: 4rpx 0;
    }

    .product-class {
      color: #666666;
    }
  }

}

/deep/ .u-input__input {
  color: #fff !important;
}

</style>
